<!-- components/DatasetUploadDialog.vue -->
<template>
  <el-dialog
      v-model="dialogVisible"
      title="上传数据集"
      width="40%"
      top="5vh"
      @closed="handleClose"
  >
    <el-form
        :model="formData"
        :rules="formRules"
        ref="uploadForm"
        label-width="120px"
        label-position="right"
    >
      <!-- 数据集信息表单 -->
      <el-form-item label="数据集名称" prop="name">
        <el-input
            v-model="formData.name"
            placeholder="请输入数据集名称"
            clearable
        />
      </el-form-item>

      <el-form-item label="数据集描述" prop="description">
        <el-input
            v-model="formData.description"
            type="textarea"
            :rows="3"
            placeholder="请输入数据集描述"
        />
      </el-form-item>

      <!-- 文件上传区域 -->
      <el-form-item label="选择文件" prop="files">
        <el-upload
            drag
            multiple
            :limit="5"
            :auto-upload="false"
            :on-change="handleFileChange"
        >
          <el-icon class="el-icon--upload"><upload /></el-icon>
          <div class="el-upload__text">
            将文件拖到此处或<em>点击上传</em>
          </div>
          <template #tip>
            <div class="el-upload__tip">
              支持CSV/JSON/PNG格式，单个文件不超过2GB
            </div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

// 弹窗显示控制
const dialogVisible = ref(false)
const openDialog = () => dialogVisible.value = true

// 表单数据
const formData = reactive({
  name: '',
  description: '',
  files: []
})

// 表单验证规则
const formRules = {
  name: [
    { required: true, message: '请输入数据集名称', trigger: 'blur' },
    { min: 2, max: 30, message: '长度在2到30个字符', trigger: 'blur' }
  ],
  files: [
    { required: true, message: '请至少选择一个文件', trigger: 'change' }
  ]
}

// 文件选择处理
const handleFileChange = (file) => {
  formData.files.push(file.raw)
}

// 表单提交
const uploadForm = ref(null)
const submitForm = () => {
  uploadForm.value.validate(valid => {
    if (valid) {
      // 这里可以添加实际的上传逻辑
      ElMessage.success('表单验证通过，准备上传...')
      dialogVisible.value = false
    } else {
      ElMessage.warning('请填写完整表单信息')
      return false
    }
  })
}

// 弹窗关闭时重置表单
const handleClose = () => {
  uploadForm.value.resetFields()
  formData.files = []
}

// 暴露打开方法
defineExpose({ openDialog })
</script>

<style scoped>
.el-upload-dragger {
  display: flex;
  flex-direction: column;
  justify-content: center;  /* 垂直居中 */
  align-items: center;     /* 水平居中 */
  padding: 40px 20px;      /* 增加内边距 */
  min-height: 200px;       /* 设置最小高度 */

  /* 调整图标与文字的间距 */
  .el-icon--upload {
    margin-bottom: 20px;
  }

  /* 文本内容居中 */
  .el-upload__text {
    display: block;
    text-align: center;
    line-height: 1.5;

    em {
      color: #409EFF;
      font-style: normal;
    }
  }
}

/* 调整提示文字样式 */
.el-upload__tip {
  margin-top: 15px;
  text-align: center;
}

</style>